<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>JS 动画</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/velocity/1.2.3/velocity.min.js"></script>
    <script src="https://cdn.bootcss.com/vue/2.5.16/vue.js"></script>
  </head>
  <body>
    <div id="app">
      <button @click="show = !show">
        Toggle
      </button>
      <transition
        appear
        v-on:before-appear="customBeforeAppearHook"
        v-on:appear="customAppearHook"
        v-on:after-appear="customAfterAppearHook"
        v-on:appear-cancelled="customAppearCancelledHook"
        v-on:before-enter="beforeEnter"
        v-on:enter="enter"
        v-on:after-enter="afterEnter"
        v-on:enter-cancelled="enterCancelled"
        v-on:before-leave="beforeLeave"
        v-on:leave="leave"
        v-on:after-leave="afterLeave"
        v-on:leave-cancelled="leaveCancelled"
      >
        <p v-if="show">
          Demo
        </p>
      </transition>
    </div>

    <script>
      var vm = new Vue({
        el: "#app",
        data: {
          show: true
        },
        methods: {
          // --------
          // 初始化
          // --------
          customBeforeAppearHook: function(el) {
            console.log('before-appear')
          },
          customAppearHook: function(el, done) {
            console.log('appear')
            Velocity(el, { opacity: 1, fontSize: "1.4em" }, { duration: 300 });
            Velocity(el, { fontSize: "1em" }, { complete: done });
          },
          customAfterAppearHook: function(el) {
            console.log('after-appear')
          },
          customAppearCancelledHook: function(el) {
            console.log('appear-cancelled')
          },
          // --------
          // 进入中
          // --------

          beforeEnter: function(el) {
            console.log("before-enter");
            el.style.opacity = 0;
            el.style.transformOrigin = "left";
          },
          // 当与 CSS 结合使用时
          // 回调函数 done 是可选的
          enter: function(el, done) {
            console.log("enter");

            Velocity(el, { opacity: 1, fontSize: "1.4em" }, { duration: 300 });
            Velocity(el, { fontSize: "1em" }, { complete: done });
          },
          afterEnter: function(el) {
            console.log("after-enter");
          },
          enterCancelled: function(el) {
            console.log("enter-cancelled");
          },

          // --------
          // 离开时
          // --------

          beforeLeave: function(el) {
            console.log("before-leave");
          },
          // 当与 CSS 结合使用时
          // 回调函数 done 是可选的
          leave: function(el, done) {
            console.log("leave");
            Velocity(
              el,
              { translateX: "15px", rotateZ: "50deg" },
              { duration: 600 }
            );
            Velocity(el, { rotateZ: "100deg" }, { loop: 2 });
            Velocity(
              el,
              {
                rotateZ: "45deg",
                translateY: "30px",
                translateX: "30px",
                opacity: 0
              },
              { complete: done }
            );
          },
          afterLeave: function(el) {
            console.log("after-leave");
          },
          // leaveCancelled 只用于 v-show 中
          leaveCancelled: function(el) {
            console.log("leave-cancelled");
          }
        }
      });
    </script>
  </body>
</html>
